﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>情话</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/adaptation.js"></script>
	</head>
	<body>
		<div id="loading">
			<div class="animated"></div>
			<div class="txt">Loading</div>
			<div class="progress-bar">
				<div class="progress"></div>
			</div>
		</div>
		<div id="wrap">
			<div class="page page-1">
				<div class="poster">
					<div class="img-box">
						<div class="content">
							<img src="img/avatar.jpg" alt="" />
							<div class="mask"></div>
							<div class="txt">戴上泳镜来见你<br />以防突然坠入爱河</div>
						</div>
						<div class="by">—— 爱说情话的兔爷</div>
					</div>
					<div class="shade"></div>
				</div>
				<a href="javascript:void(0);" class="create"></a>
			</div>
			
			<div class="container">
				<!--制作情话-->
				<div class="page page-2">
					<div class="img-box" id="result">
						<img src="img/avatar.jpg" alt="" />
						<img src="img/0.jpg" alt="" class="hide"/>
						<div class="mask"></div>
						<!--<textarea class="txt" placeholder="输入你的情话" onpropertychange="this.style.height=this.scrollHeight+'px';" oninput="this.style.height=this.scrollHeight+'px';"></textarea>-->
						<div class="txt" contenteditable="true">输入你的情话</div>
						<a href="javascript:void(0);" class="change">换一张图试试</a>
					</div>
					<a href="javascript:void(0);" class="submit"></a>
				</div>
				
				<!--别人的情话-->
				<div class="page page-3 list-page">
					<ul>
						<li>
							<div class="header clearfix">
								<div class="nickname">
									<img src="img/avatar.jpg" alt="" />三十六个故事
								</div>
								<div class="pubdate">2分钟前</div>
							</div>
							<div class="img-box">
								<img src="img/result.png" alt="" />
								<div class="footer">
									<span class="zan" data-uid="123">喜欢<em>159</em>次</span>
									<span class="biaobai">表白</span>
								</div>
							</div>
							<div class="shade"></div>
						</li>
						
						<li>
							<div class="header clearfix">
								<div class="nickname">
									<img src="img/avatar.jpg" alt="" />三十六个故事
								</div>
								<div class="pubdate">2分钟前</div>
							</div>
							<div class="img-box">
								<img src="img/result.png" alt="" />
								<div class="footer">
									<span class="zan" data-uid="456">喜欢<em>159</em>次</span>
									<span class="biaobai">表白</span>
								</div>
							</div>
							<div class="shade"></div>
						</li>
						
						<li>
							<div class="header clearfix">
								<div class="nickname">
									<img src="img/avatar.jpg" alt="" />三十六个故事
								</div>
								<div class="pubdate">2分钟前</div>
							</div>
							<div class="img-box">
								<img src="img/result.png" alt="" />
								<div class="footer">
									<span class="zan" data-uid="789">喜欢<em>159</em>次</span>
									<span class="biaobai">表白</span>
								</div>
							</div>
							<div class="shade"></div>
						</li>
					</ul>
					
					<img src="img/more.gif" alt="" class="more"/>
					<div class="loaded">已全部加载完毕</div>
					
				</div>
				
				<!--我的情话-->
				<div class="page page-4 list-page">
					<ul>
						<li>
							<div class="header clearfix">
								<div class="nickname">
									<img src="img/avatar.jpg" alt="" />三十六个故事
								</div>
								<div class="pubdate">2分钟前</div>
							</div>
							<div class="img-box">
								<img src="img/result.png" alt="" />
								<div class="footer">
									<span class="zan" data-uid="123">喜欢<em>159</em>次</span>
									<span class="biaobai">表白</span>
								</div>
							</div>
							<div class="shade"></div>
						</li>
						
						<li>
							<div class="header clearfix">
								<div class="nickname">
									<img src="img/avatar.jpg" alt="" />三十六个故事
								</div>
								<div class="pubdate">2分钟前</div>
							</div>
							<div class="img-box">
								<img src="img/result.png" alt="" />
								<div class="footer">
									<span class="zan" data-uid="456">喜欢<em>159</em>次</span>
									<span class="biaobai">表白</span>
								</div>
							</div>
							<div class="shade"></div>
						</li>
						
						<li>
							<div class="header clearfix">
								<div class="nickname">
									<img src="img/avatar.jpg" alt="" />三十六个故事
								</div>
								<div class="pubdate">2分钟前</div>
							</div>
							<div class="img-box">
								<img src="img/result.png" alt="" />
								<div class="footer">
									<span class="zan" data-uid="789">喜欢<em>159</em>次</span>
									<span class="biaobai">表白</span>
								</div>
							</div>
							<div class="shade"></div>
						</li>
					</ul>
					
					<img src="img/more.gif" alt="" class="more"/>
					<div class="loaded">已全部加载完毕</div>
				</div>
				
				<!--底部导航-->
				<div id="footer" class="clearfix">
					<a href="javascript:void(0);" class="nav" data-index="3">听情话</a>
					<a href="javascript:void(0);" class="nav cur hidden" data-index="2">制作情话</a>
					<a href="javascript:void(0);" class="nav" data-index="4">我的</a>
				</div>
			</div>
		</div>
		
		<!--分享-->
		<div class="share-box">
			<img src="img/share.png" alt="" />
		</div>
		
		<!--提交资料loading-->
		<div class="waiting-box">
			<div class="animated"></div>
		</div>
		
		<div style="display: none;">
			<div id="result-box">
				<div class="title">提交成功!</div>
				<img src="img/result.png" alt="" />
				<div class="tips">提示：长按图片可保存到相册</div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="nav others" data-index="3"></a>
					<a href="javascript:void(0);" class="nav my" data-index="4"></a>
				</div>
			</div>
		</div>
		
		<script id="listTpl" type="text/html">
			<%each list as value i%>
			<li>
				<div class="header clearfix">
					<div class="nickname">
						<img src="<%value.avatar%>" alt="" /><%value.nickname%>
					</div>
					<div class="pubdate"><%value.pubdate%></div>
				</div>
				<div class="img-box">
					<img src="<%value.works%>" alt="" />
					<div class="footer">
						<span class="zan" data-uid="<%value.uid%>">喜欢<em><%value.num%></em>次</span>
						<span class="biaobai">表白</span>
					</div>
				</div>
				<div class="shade"></div>
			</li>
			<%/each%>
		</script>
		
		<script src="js/zepto.min.js"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/template.js"></script>
		<!--<script src="js/preloadjs-0.6.2.min.js"></script>-->
		<script src="js/imageLoad.js"></script>
		<script src="js/load.js"></script>
		<script src="js/html2canvas.js"></script>
		<script>
			$(function(){
				template.config('openTag', '<%');
				template.config('closeTag','%>');
				
				var curPage = 1;
				
				if(1){
					curPage = 3;
					$(".page-1").hide();
					$(".page-3").show();
					$("#footer").show();
					$("#footer a").eq(0).addClass('cur');
					$("#footer a").eq(1).removeClass('cur hidden');
				}
				
				//制作情话
				$(".create").click(function(){
					$(".page").hide();
					$(".container").show();
					$(".page-2").show();
					$("#footer").show();
				});
				
				//切换背景
				var photo = 0;
				$(".change").click(function(){
					var total = $(".page-2 img").length;
					$(".page-2 img").addClass("hide");
					photo = photo+1;
					if(photo==total){
						photo=0;
					}
					$(".page-2 img").eq(photo).removeClass("hide");
				});
				
				//模拟placeholder
				/*$("#result .txt").focus(function(){
					if($(this).text()=="输入你的情话"){
						$(this).text("");
					}
				});*/
				
				$("#result .txt").on('click',function(){
					if($(this).text()=="输入你的情话"){
						$(this).text("");
					}
				});
				
				$("#result .txt").blur(function(){
					if($.trim($(this).text())==""){
						$(this).text("输入你的情话");
					}
				});
				
				var isSubmit = false;
				
				$(".submit").click(function(){
					if(isSubmit){
						return;
					}
					
					isSubmit = true;
					
					var val = $("#result .txt").text();
					if($.trim(val)=="" || val=="输入你的情话"){
						alert("请输入你的情话");
						return;
					}
					$(".change").hide();
					
					$(".waiting-box").addClass("show");
					
					html2canvas($("#result"), {  
                        allowTaint: true,  
                        taintTest: false,  
                        onrendered: function(canvas) {  
                            canvas.id = "mycanvas";  
                            //生成base64图片数据  
                            var dataUrl = canvas.toDataURL();
                            $.ajax({
								type: "get",
								data: {pic:dataUrl},
								dataType: "json",
								url: "data/data.json",
								success: function(data){
									$("#result-box img").attr('src',dataUrl);
									layer.open({
										content: $("#result-box")[0].outerHTML,
										shadeClose: false
									});
									isSubmit = false;
									$(".change").show();
									$(".waiting-box").removeClass("show");
									
									var html = template('listTpl', data);
									$(".page-3 ul").prepend(html);
									$(".page-4 ul").prepend(html);
								}
							})
                        }  
                   });
				});
				
				$(document).on('click','.nav',function(){
					var index = $(this).data("index");
					layer.closeAll();
					$(window).scrollTop(0,0);
					$("textarea").val("");
					$(".nav").removeClass("cur");
					$("[data-index='"+index+"']").addClass("cur");
					$(".page").hide();
					$(".page-"+index).show();
					curPage = index;
					if(curPage==2){
						$(this).addClass("hidden");
					}else{
						$(".nav").eq(1).removeClass("hidden");
					}
				});
				
				//点赞
				$(document).on("click",".zan",function(){
					if($(this).hasClass("active")){
						return;
					}
					var uid = $(this).data('uid');
					var _this = this;
					$.ajax({
						type: "get",
						data: {uid: uid},
						dataType: "json",
						url: "data/data.json",
						success: function(data){
							$("[data-uid='"+uid+"']").addClass("active");
							$("[data-uid='"+uid+"']").each(function(idx,item){
								$(item).find("em").text(Number($(item).find("em").text())+1);
							});
							//$(_this).addClass("active");
							//$(_this).find("em").text(Number($(_this).find("em").text())+1);
						}
					})
				});
				
				//分享
				$(document).on('click',".biaobai",function(){
					$(".share-box").show();
				});
				
				$(".share-box").click(function(){
					$(this).hide();
				});
				
				//加载更多列表
				var canLoad = true;
				
				var loadMore = function(){
					$.ajax({
						type:"get",
						url:"data/list.json",
						dataType: 'json',
						data: {},
						success: function(data){
							var html = template('listTpl', data);
							
							setTimeout(function(){
								if(curPage==3){
									$(".page-3 ul").append(html);
									
								}else{
									$(".page-4 ul").append(html);
								}
								canLoad = true;
								
								if(data.list.length==0){
									if(curPage==3){
										$(".page-3 .loaded").show();
										$(".page-3 .more").hide();
										
									}else{
										$(".page-4 .loaded").show();
										$(".page-4 .more").hide();
									}
								}
								
								$(".page-4 .more").removeClass("show");
							},300);
						}
					});
				}
				
				//监听滚动
				$(window).scroll(function () {
			        var docH = $(document).height();
			        var winH = $(window).height();
			        var scrollTop = $(window).scrollTop();
			        var between = docH-winH-scrollTop;
			        
			        if(between<=140 && canLoad){
			        	if(curPage==3 || curPage==4){
			        		if(curPage==3){
			        			$(".page-3 .loaded").hide();
								$(".page-3 .more").show().addClass("show");
								
							}else{
								$(".page-4 .loaded").hide();
								$(".page-4 .more").show().addClass("show");
							}
							loadMore();
			        		canLoad = false;
			        	}
			        }
				});
			});
		</script>
	</body>
</html>